<template>
  <div class="mod-menu main-container">
    <!-- 操作栏 -->
    <div class="operation-bar">
      <div
        v-if="isAuth('sys:menu:save')"
        class="default-btn primary-btn"
        @click="onAddOrUpdate()"
      >
        {{ $t("sysManagement.add") }}
      </div>
    </div>

    <!-- 表格 -->
    <div class="table-con sys-menu-table">
      <el-table
        :data="dataList"
        header-cell-class-name="table-header"
        style="width: 100%;"
        row-key="menuId"
      >
        <el-table-column
          prop="name"
          tree-key="menuId"
          width="260"
          :label="$t('publics.name')"
        />
        <el-table-column
          prop="icon"
          :label="$t('sys.icon')"
        >
          <!-- <template #default="scope">
            <svg-icon
              v-if="scope.row.icon"
              style="stroke: #8A979E !important;color: #8A979E"
              :name="scope.row.icon || ''"
              :icon-class="'icon-' + scope.row.icon"
            />
            <span
              v-else
              style="margin-left:8px"
            >-</span>
          </template> -->
        </el-table-column>
        <el-table-column
          prop="type"
          :label="$t('sysManagement.type')"
        >
          <template #default="scope">
            <span v-if="scope.row.type === 0">{{ $t('sys.catalog') }}</span>
            <span v-if="scope.row.type === 1">{{ $t('sys.menu') }}</span>
            <span v-if="scope.row.type === 2">{{ $t('sys.button') }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="hidden"
          :label="$t('sys.isHidden')"
        >
          <template #default="scope">
            <span v-if="scope.row.hidden">{{ $t('sys.yes') }}</span>
            <span v-else>{{ $t('sys.no') }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="orderNum"
          :label="$t('hotSearch.seq')"
        />
        <el-table-column
          prop="url"
          width="150"
          :show-overflow-tooltip="true"
          :label="$t('sys.menuUrl')"
        >
          <template #default="scope">
            <span>{{ scope.row.url || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="perms"
          width="150"
          :show-overflow-tooltip="true"
          :label="$t('sys.authorization')"
        >
          <template #default="scope">
            <span>{{ scope.row.perms || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          align="center"
          width="150"
          :label="$t('sys.operation')"
        >
          <template #default="scope">
            <div class="text-btn-con">
              <div
                v-if="scope.row.type === 0"
                class="default-btn text-btn"
                @click="onRelService(scope.row)"
              >
                关联服务
              </div>
              <div
                v-if="isAuth('sys:menu:update')"
                class="default-btn text-btn"
                @click="onAddOrUpdate(scope.row.menuId)"
              >
                {{ $t('sysManagement.modify') }}
              </div>
              <div
                v-if="isAuth('sys:menu:delete')"
                class="default-btn text-btn"
                @click="onDelete(scope.row)"
              >
                {{ $t('coupon.delete') }}
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update
      v-if="addOrUpdateVisible"
      ref="addOrUpdateRef"
      @refresh-data-list="getDataList"
      @close="addOrUpdateClose"
    />

    <el-dialog
      v-model="serviceVisible"
      title="关联服务"
      :close-on-click-modal="false"
    >
      <div>
        <span>全网推: </span>
        <el-checkbox-group v-model="serviceForm.mallVersion">
          <el-checkbox
            :label="'2'"
          >
            基础版
          </el-checkbox>
          <el-checkbox
            :label="'3'"
          >
            标准版
          </el-checkbox>
        </el-checkbox-group>
      </div>
      <div>
        <span>全网买: </span>
        <el-checkbox-group v-model="serviceForm.tradeVersion">
          <el-checkbox
            :label="'2'"
          >
            基础版
          </el-checkbox>
        </el-checkbox-group>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <div
            class="default-btn"
            @click="serviceVisible = false"
          >
            {{ $t('coupon.cancel') }}
          </div>
          <div
            class="default-btn primary-btn"
            @click="onSetRel"
          >
            {{ $t('coupon.confirm') }}
          </div>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import AddOrUpdate from './add-or-update.vue'
import { treeDataTranslate, isAuth } from '@/utils/index.js'
import { ElMessage, ElMessageBox } from 'element-plus'

const dataList = ref([])
const dataListLoading = ref(false)

onMounted(() => {
  getDataList()
})
// 获取数据列表
const getDataList = () => {
  dataListLoading.value = true
  http({
    url: http.adornUrl('/sys/enterpriseMenu/table'),
    method: 'get',
    params: http.adornParams()
  }).then(({ data }) => {
    dataList.value = treeDataTranslate(data, 'menuId')
    dataListLoading.value = false
  })
}
// 新增 / 修改
const addOrUpdateRef = ref(null)
const addOrUpdateVisible = ref(false)
const onAddOrUpdate = (id) => {
  addOrUpdateVisible.value = true
  nextTick(() => {
    addOrUpdateRef.value?.init(id)
  })
}
const router = useRouter()
// 删除
const onDelete = (row) => {
  ElMessageBox.confirm($t('seckill.isDeleOper'), $t('text.tips'), {
    confirmButtonText: $t('coupon.confirm'),
    cancelButtonText: $t('coupon.cancel'),
    type: 'warning'
  }).then(() => {
    http({
      url: http.adornUrl(`/sys/enterpriseMenu/${row.menuId}`),
      method: 'delete',
      data: http.adornData()
    }).then(() => {
      if (row.type === 1) {
        router.go(0)
      }
      ElMessage({
        message: $t('publics.operation'),
        type: 'success',
        duration: 1500,
        onClose: () => {
          getDataList()
        }
      })
    })
  })
}
/**
 * 关闭销毁编辑弹框
 */
const addOrUpdateClose = () => {
  addOrUpdateVisible.value = false
}

const serviceForm = ref({})
const serviceVisible = ref(false)
const onRelService = (row) => {
  serviceVisible.value = true
  serviceForm.value = {
    ...row,
    mallVersion: row.mallVersions ? row.mallVersions.split(',') : [],
    tradeVersion: row.tradeVersions ? row.tradeVersions.split(',') : []
  }
}

const onSetRel = () => {
  // API
  http({
    url: http.adornUrl('/sys/enterpriseMenu'),
    method: 'put',
    data: http.adornData({
      menuId: serviceForm.value.menuId,
      type: serviceForm.value.type,
      parentId: serviceForm.value.parentId || 0,
      url: serviceForm.value.url,
      perms: serviceForm.value.perms,
      orderNum: serviceForm.value.orderNum,
      icon: serviceForm.value.icon,
      hidden: serviceForm.value.hidden,
      menuLangList: serviceForm.value.menuLangList,
      mallVersions: (serviceForm.value.mallVersion || []).join(),
      tradeVersions: (serviceForm.value.tradeVersion || []).join()
    })
  }).then(() => {
    serviceVisible.value = false
    ElMessage({
      message: $t('publics.operation'),
      type: 'success',
      duration: 1500,
      onClose: () => {
        getDataList()
      }
    })
  })
}
</script>

<style lang="scss" scoped>
</style>
